<template>
    <el-row :gutter="50" justify="space-between">
        <el-col :span="16">
            <Header></Header>
            <div class="list">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="技术部" name="first">
                        <div class="lists">
                            <Knowledge :type="1" :list="state.list" :total="state.total" :admin_id="state.admin_id" @delkey="delkey"></Knowledge>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="项目部" name="second">
                        <div class="lists">
                            <Knowledge :type="2" :list="state.list" :total="state.total" :admin_id="state.admin_id" @delkey="delkey"></Knowledge>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="新闻中心" name="third">
                        <div class="lists">
                            <Knowledge :type="3" :list="state.list" :total="state.total" :admin_id="state.admin_id" @delkey="delkey"></Knowledge>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="设计组" name="fourth">
                        <div class="lists">
                            <Knowledge :type="4" :list="state.list" :total="state.total" :admin_id="state.admin_id" @delkey="delkey"></Knowledge>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div class="pation" v-if="state.total > 4">
                    <el-pagination background layout="prev, pager, next" :total="state.total" page-size="5" @current-change="currentChange">
                    </el-pagination>
                </div>
            </div>
        </el-col>
        <el-col :span="8">
            <Right></Right>
        </el-col>
    </el-row>
</template>
<script>
import Header from "@/components/common/header";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import Right from "@/components/common/right";
import Knowledge from "@/components/common/knowledge";
import { getKnowledge,delKnowledge } from "@/request/api";
import { ElMessageBox } from 'element-plus'
const state = reactive({
    list: [],
    total: 0,
    page: 1,
    ktype: 1,
    admin_id: 0
})
export default {
    name: "listKnowledge",
    components: { Header, Right, Knowledge },
    setup() {
        const init = () => {
            let param = {
                page: state.page,
                ktype: state.ktype,
                pageSize: 5
            }
            getKnowledge(param).then(res => {
                state.list = res.data.data;
                state.total = res.data.total
                let userpar = localStorage.getItem('user')
                let user = JSON.parse(userpar);
                state.admin_id = user.id
            })
        }
        const delkey = (index) => {
            ElMessageBox.confirm("确认后将无法恢复", "您确定要删除吗?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                let id = state.list[index].id

                let param = {
                    kb_id : id
                }
                delKnowledge(param).then(res => {
                    init()
                })
            })
            .catch(() => {
            });
        }

        //切换
        const handleClick = (tab, event) => {
            state.page = 1
            state.ktype = (Number(tab.index) + Number(1))
            init()

        }
        //分页
        const currentChange = (val) => {
            if (val !== state.page) {
                state.page = val
                return init()
            }
        }
        onMounted(async () => {
            await init()
        })
        return {
            activeName: "first",
            state,
            delkey,
            handleClick,
            currentChange
        };
    }
};
</script>
<style lang="scss">
.lists {
    background: white;
    padding: 25px 20px 20px 20px;
    border-radius: 15px;

    .el-tabs__item.is-active {
        font-weight: bold;
    }

    .list {
        margin-top: 20px;
    }
}
.pation {
    text-align: center;
    background: white;
    padding: 15px;
}
.list-none {
    text-align: center;
    margin-top: 30px;
    .l-str {
        margin-top: 15px;
        color: #929496;
        font-size: 15px;
    }
    .l-img {
        width: 200px;
    }
}
</style>
